<template>
	<!--    数据查询-->
	<div id="C1">
		<div id="searchbox">
			<el-form :inline="true" :model="searchKeyWords" class="demo-form-inline">
				<el-form-item label="菜品名称">
					<el-input v-model="searchKeyWords.name" placeholder="菜品名称"></el-input>
				</el-form-item>
				<el-form-item label="菜式分类">
					<el-select v-model="searchKeyWords.classify_name " placeholder="菜式分类">
						<el-option disabled label="请选择" value="" ></el-option>
						<el-option label="热菜" value="热菜"></el-option>
						<el-option label="凉菜" value="凉菜"></el-option>
						<el-option label="汤羹" value="汤羹"></el-option>
						<el-option label="主食" value="主食"></el-option>
						<el-option label="小吃" value="小吃"></el-option>
						<el-option label="酒水" value="酒水"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit">查询</el-button>
					<el-button  type="primary" @click="dialogFormVisible = true">新增菜品</el-button>
				</el-form-item>
			</el-form>
			<el-dialog title="新增菜品信息" :visible.sync="dialogFormVisible" center width="400px">
				<el-form  :model="insertKeyWords" class="demo-form-inline" ref="insertKeyWords" :rules="rules">
					<el-form-item label="菜品名称" prop="name">
						<el-input v-model="insertKeyWords.name" placeholder="菜品名称"></el-input>
					</el-form-item>
					<el-form-item label="菜式分类" prop="classify_name">
						<template>
							<el-select v-model="insertKeyWords.classify_name " placeholder="菜式分类">
								<el-option disabled label="请选择" value="" ></el-option>
								<!--							<el-option :v-for="item in ClassifyName" :value="item.name"></el-option>-->
								<el-option label="热菜" value="热菜"></el-option>
								<el-option label="凉菜" value="凉菜"></el-option>
								<el-option label="汤羹" value="汤羹"></el-option>
								<el-option label="主食" value="主食"></el-option>
								<el-option label="小吃" value="小吃"></el-option>
								<el-option label="酒水" value="酒水"></el-option>
							</el-select>
						</template>
					</el-form-item>
					<el-form-item label="价格" prop="price">
						<el-input v-model="insertKeyWords.price" placeholder="价格"></el-input>
					</el-form-item>
					<el-form-item label="图片路径"  prop="imgsrc">
						<el-input v-model="insertKeyWords.imgsrc" placeholder="菜品图片路径"></el-input>
					</el-form-item>
<!--					<el-form-item label="菜品图片">-->
<!--						<el-upload-->
<!--								class="upload-demo"-->
<!--								action="https://jsonplaceholder.typicode.com/posts/"-->
<!--								list-type="picture">-->
<!--							<el-button size="small" type="primary">点击选择</el-button>-->
<!--							<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
<!--						</el-upload>-->
<!--					</el-form-item>-->
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="newCP">确 定</el-button>
				</div>
			</el-dialog>
		</div>
		<!--        表格渲染-->
		<template>
			<el-table
					:data="isGetData ? getCurrentData:searchCurrentData"
					style="width: 100%">
				<el-table-column
						label="名称"
						align="center"
						width="180">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.name }}</span>
					</template>
				</el-table-column>
				<el-table-column
						label="图片"
						align="center"
						width="150">
					<template slot-scope="scope" >
						<img style="width: 50px;height: 100%" :src=scope.row.imgsrc alt="">
					</template>
				</el-table-column>
				<el-table-column
						label="菜式分类"
						align="center"
						width="180">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{  scope.row.classify_name }}</span>
					</template>
				</el-table-column>
				<el-table-column
						label="价格"
						align="center"
						width="180">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{  scope.row.price }}</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="300" align="center">
					<template slot-scope="scope">
						<CpEdit  :editData='scope.row' @queren="handleEdit(scope.$index, scope.row)"></CpEdit>
						<CpDel :delId="scope.row.name"  @queren="handleDelete(scope.$index, scope.row)"></CpDel>
					</template>
				</el-table-column>
			</el-table>
		</template>
		<!--        分页-->

		<div id="PageBox" class="block">
			<el-pagination
					background
					:current-page="isGetData? gcurrentPage:scurrentPage"
					@current-change="handleCurrentChange"
					:page-size="5"
					layout="prev, pager, next"
					:total="isGetData ? getTotalData:searchTotalData">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import {mapActions} from 'vuex'
	import CpDel from '../../components/houtai/CpDel'
	import CpEdit from '../../components/houtai/CpEdit'


	export default {
		name: "cpsz",
		components:{
			CpDel ,
			CpEdit
		} ,
		data(){
			return{
				dialogFormVisible: false,
				isGetData:true,    //如果是页面渲染数据，table渲染数据源就是Getdata,否则,就是数据查询数据渲染，数据源就是searchData
				gcurrentPage: 1,   //当前页
				scurrentPage: 1,   //当前页
				searchKeyWords: {     //查询关键字存储
					name: '',
					classify_name: '',
					// pageNum:this.scurrentPage
				},
				insertKeyWords: {     //查询关键字存储
					name: '',
					classify_name: '',
					price:'' ,
					imgsrc: ''
				} ,


				rules: {
					name: [
						{ required: true, message: '请输入菜名', trigger: 'blur' },
						{ min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
					],
					classify_name: [
						{ required: true, message: '请选择菜品类名', trigger: 'blur' },
						{ min: 1, max:15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
					],
					price: [
						{ required: true, message: '请输入价格', trigger: 'blur' }
					],
					imgsrc: [
						{ required: true, message: '请输入路径', trigger: 'blur' }
					]

				}
			}
		},
		
		computed:{
			ClassifyName(){
				return this.$store.state.cpstore.ClassifyName
			},
			getCurrentData(){
				return this.$store.state.cpstore.getCurrentDataA
			},
			getTotalData(){
				// console.log(this.$store.state.cpstore.CountA)
				return this.$store.state.cpstore.CountA
			},
			searchCurrentData(){
				// console.log(this.$store.state.cpstore.searchCurrentDataA)
				return this.$store.state.cpstore.searchCurrentDataA
			},
			searchTotalData(){
				return 1
			}
		},
		methods:{
			success() {
				this.$notify.success({
					title: '成功',
					message: '新增成功！',
					offset:50
				});
			},
			error() {
				this.$notify.error({
					title: '错误',
					message: '网络出故障了，添加失败，请稍后重试！'
				});
			},
			...mapActions(['getDishesMainCount','getCurrentDataA','searchCurrentDataA']),
			newCP(){
				

				 this.$refs.insertKeyWords.validate((valid) => {
					if (valid) {
						this.$axios({
							url: '/mgrsite/dishesMainController/insertDishesMain',
							method: 'post',
							data: {
								name: this.insertKeyWords.name,
								classify_name: this.insertKeyWords.classify_name,
								price: this.insertKeyWords.price,
								imgsrc: this.insertKeyWords.imgsrc
							}
						}).then(res => {
							console.log(res)
							if (res.data.code ==200) {
								this.dialogFormVisible = false
								this.success()
								this.getDishesMainCount()
								this.getCurrentDataA([0,5])
							} else {
								this.error()
							}
						})
					} else {
						this.$notify.error('请检查提交数据的正确性！是否满足提示要求？')
					}
				})
			}   ,
			onSubmit(){
				this.isGetData=false
				let searchData=this.searchKeyWords
				this.searchCurrentDataA(searchData)
			},
			handleEdit(index,item){
				// console.log(111)
				this.getCurrentDataA(this.gcurrentPage)
				// this.editItem=item
			},
			handleDelete(index,item) {
					if (this.isGetData) {
						if (res.code === 200) {
							this.getCurrentDataA(this.gcurrentPage)
						}
					}else {
							if (res.code === 200) {
								let searchData = this.searchKeyWords
								this.searchCurrentDataA(searchData)
							}
						}
			},
			handleSizeChange(){

			},
			handleCurrentChange(val){
				if(this.isGetData){
					console.log(val)
					this.gcurrentPage=val
					this.getCurrentDataA([(val-1)*5,5])
				}else{
					this.scurrentPage=val
				}

			}
		} ,
		    created() {
			this.getDishesMainCount()
			this.getCurrentDataA([0,5]).then(res=>{
				// console.log(res)
			})
		}


	}
</script>

<style lang="less" scoped>
	#PageBox{
		padding: 10px;
		text-align: left;
		position: absolute;
		bottom: 10px;
		left: 20px;
	}
	#xiaoshou{
		cursor: pointer;
	}
	#C1{
		/*margin: auto;*/
		margin-left: 50px;
		margin-top: 10px;
		width: 1000px;
		height: 560px;
		position: relative;
		#searchbox{
			width: 1000px;
			text-align: left;
		}
	}
</style>
